const ulDom = document.querySelector('#ul')

const lis = ulDom.querySelectorAll('li')
console.log(lis)

// Array.prototype.slice.call(lis).forEach((li)=> {}) ,

// lis是一个什么数据结构
// Array.from(lis).forEach((li, index) => {
//   console.log(li)
//   li.addEventListener('click', (event) => {
//     console.log('event', event, index)
//   })
// })

const snip = (dom) => {
  const isContains = ulDom.contains(dom)
  if (!isContains) {
    return
  }

  // 再看是否已经是 LI
  if (dom.tagName === "LI") {
    return dom
  }
  // 如果不是，就向上嗅探   
  let cur = dom
  const find = () => {
    cur = dom.parentNode
    console.log(dom.parentNode)
    if (cur.tagName === "LI") {
      return cur
    }
    find(cur)
  }

  find(dom)
}

// 我们想将 li 的事件委托给 ul，正是运行了事件冒泡
ulDom.addEventListener('click', (event) => {
  console.log('event', event.target)
  const dom = event.target
  const index = dom.getAttribute('data-index')
  // 有可能你点的是 button 而不是 li，所以还需有一个向上嗅探的过程

  console.log(snip(dom))

  // 做接下来 li 的逻辑
  console.log('index', index)
  // 触发对象 event.target
  // 触发源 event.currentTarget
})